<template>
  <div id="CarSwipe">
    <mt-swipe :auto="4000" class="swipe">
      <mt-swipe-item
        v-for="(item,index) in standardImgs"
        :key="index"
        :style="{'background-image':'url('+item.fileUrl+')'}"
        class="swipeItem"
      ></mt-swipe-item>
    </mt-swipe>
    <div class="carInfo whiteBg">
      <p>{{title}}</p>
      <div class="info">
        <span class="date">上牌时间：{{registerTime}}</span>
        <span class="city ellipsis-1">
          <img src="../../../static/m_img/z_dw.png">
          {{carCityName}}
        </span>
        <span class="price">{{(retailPrice/10000).toFixed(2)}}万</span>
      </div>
    </div>
    <div class="video" v-show="videos!==null">
      <video
        :src="videos ? videos.fileUrl: ''"
        :poster="videos?videos.thumbnailUrl:''"
        controls="controls"
      >您的浏览器不支持 video 标签。</video>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    standardImgs: Array,
    registerTime: String,
    carCityName: String,
    retailPrice: Number,
    videos: Array
  },
  methods: {},
  mounted() {}
};
</script>
<style lang="scss">
#CarSwipe {
  .video {
    width: 95%;
    margin: 15px auto;
    height: 200px;
    video {
      width: 100%;
      height: 200px;
    }
  }
  .swipe {
    height: 210px;
    .swipeItem {
      background-size: cover;
      background-position: center;
    }
  }

  .carInfo {
    padding: 15px;
    p {
      color: #323232;
      font-size: 1.416667rem;
      // font-weight: bold;
    }
    .info {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #666;
      .city {
        color: #999;
        width: 25%;
        img {
          width: 16px;
          vertical-align: -3px;
        }
      }
      .price {
        color: #0098ff;
        font-size: 1.5rem;
        font-weight: bold;
      }
    }
  }
}
</style>